<template name="AssessScoresRadar">
	<view class="qiun-charts1">
		<canvas canvas-id="canvasRadar" id="canvasRadar" class="charts1"></canvas>
	</view>
</template>

<script>
	import uCharts from '../js_sdk/u-charts/u-charts/u-charts.js'

	var _self;
	var canvaRadar = null;

	export default {

		name: "AssessScoresRadar",

		props: {
			dimensionScores: {
				type: Array,
				default () {
					return []
				}
			},
		},

		data() {
			return {
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
			};
		},

		created() {
			_self = this;
		this.cWidth = uni.upx2px(680);
			this.cHeight = uni.upx2px(500);
			this.initData();
		},

		methods: {
			initData() {
				let Radar = {
					categories: [],
					series: []
				};
				var series = {
					name: 'w',
					data: [],
				}
				for (var index = 0; index < this.$props.dimensionScores.length - 1; index++) {
					var item = this.$props.dimensionScores[index];
					Radar.categories[index] = item.dimensionName;
					series.data[index] = item.dqFraction;
				}
				Radar.series[0] = series;
				console.log(123456);
				console.log(Radar);
				_self.showRadar("canvasRadar", Radar);
			},

			showRadar(canvasId, chartData) {
				canvaRadar = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'radar',
					fontSize: 11,
					legend: {
						show: false
					},
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					animation: true,
					dataLabel: true,
					categories: chartData.categories,
					series: chartData.series,
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						radar: {
							max: 150 //雷达数值的最大值
						}
					}
				});
			}
		}
	}
</script>

<style>
	.qiun-charts1 {
		margin: 30rpx;
		height: 500upx;
		background-color: #FFFFFF;
		border-radius: 30rpx;
	}

	.charts1 {
		width: 100%;
		height: 500upx;
		background-color: #FFFFFF;
	}
</style>
